<template>
	<view class="my-order bg-active-color" >
		<Lines></Lines>
		<view class="order-header">
			<view class="header-item"
				v-for='(item, index) in tabList'
				:key="index"
				:class='tabIndex == index ? "active" : ""'
				@tap='changeTab(index)'
			>
			{{item.name}}
			</view>
		</view>
		
		<block 
		v-for="(tabItem, tabI) in tabList"
		:key="tabI"
		>
		<view class="" v-show='tabI === tabIndex'>
		<view v-if='tabItem.list.length > 0' class="order-main" :style="'height:'+clientHeight+'px;'">
			<!-- 商品 -->
			<view class="" v-for='(k, i) in tabItem.list' :key='i'>
			<view class="order-goods">
				<view class="goods-status f-active-color">{{ k.status }}</view>
				<view class="goods-item"
				v-for='(item, index) in k.goods_item'
				:key="index"
				>
				<OrderList :item='item' :index='index'></OrderList>
				</view>
			</view>
			
			<Lines></Lines>
			<!-- 总价 -->
			<view class="total-price">
				订单金额：<text class="f-active-color">￥ {{k.totalPrice}}</text>(包含运费 ￥ 5.00)
			</view>
			
			<Lines></Lines>
			<!-- 支付 -->
			<view class="payment">
				<view class="payment-text">支付</view>
			</view>
			</view>
		</view>
		
		<view v-else class="no-order" :style="'height:'+clientHeight+'px;'">
			<view class="">您还没有相关订单</view>
			<view class="no-order-home">去首页逛逛</view>
		</view>
	</view>
</block>
		
	</view>
</template>

<script>
	import Lines from '@/components/common/Lines.vue'
	import OrderList from '@/components/order/order-list.vue'
	export default {
		data() {
			return {
				// 页面背景高度
				clientHeight: 0,
				// Tab索引当前位置
				tabIndex: 0,
				// 顶部选项卡的的 数据
				tabList: [
					{ 
						name:"全部",
						list:[
							{
								status:"待付款",
								totalPrice:"3999.00",
								goods_item:[
									{
										imgUrl:"../../static/img/Children3.jpg",
										name:"阿玛尼(Emporio Armani) 手表 黑武士休闲皮带时尚欧美简约大气黑盘石英男士腕表礼物AR1973",
										attes:"黑色",
										pprice:"299.00",
										num:"1"
									},
									{
										imgUrl:"../../static/img/Children2.jpg",
										name:"黑武士休闲皮带时尚欧美简约大气黑盘石英男士腕表礼物AR1973，阿玛尼(Emporio Armani) 手表 ",
										attes:"白色",
										pprice:"199.00",
										num:"5"
									}
								]
							}
						]
					},
					{
						name:"待付款",
						list:[]
					},
					{
						name:"待发货",
						list:[]
					},
					{
						name:"待收货",
						list:[]
					},
					{
						name:"待评价",
						list:[]
					},
				]
			}
		},
		onReady () {
		  uni.getSystemInfo({
		    success: (res) => {
		      this.clientHeight = res.windowHeight - this.getClientHeight();
		    }
		  })
		},
		components:{
			Lines,
			OrderList
		},
		methods: {
			// 顶部切换
			changeTab(index) {
				this.tabIndex = index;
			},
			// 获取可视区域高度兼容
			getClientHeight () {
			  const res = uni.getSystemInfoSync()
			  const system = res.platform;
			  if (system === 'ios') {
			    return 44 + res.statusBarHeight;
			  } else if (system === 'android') {
			    return -29 + res.statusBarHeight;
			  } else {
			    return 0;
			  }
			},
		}
	}
</script>

<style scoped>
.no-order {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	background-color: #FFFFFF;
}
.no-order-home {
	padding: 6rpx 60rpx;
	border: 2rpx solid #ff115c;
	color: #ff115c;
	border-radius: 40rpx;
}
.order-header {
	background-color: #FFFFFF;
	display: flex;
	justify-content: center;
	align-items: center;
	border-bottom:  1px solid #f3f3f3;
}
.header-item {
	text-align: center;
	flex: 1;
	line-height: 120rpx;
}
.active {
	border-bottom: 4rpx solid #ff115c;
}
.goods-status {
	display: flex;
	justify-content: flex-end;
	background-color: #FFFFFF;
	padding: 20rpx;
}
.total-price {
	display: flex;
	justify-content: flex-end;
	background-color: #FFFFFF;
	padding: 20rpx;
}
.payment {
	display: flex;
	justify-content: flex-end;
	background-color: #FFFFFF;
	padding: 20rpx;
}
.payment-text {
	border: 1px solid #ff115c;
	padding: 6rpx 40rpx;
	border-radius: 40rpx;
}
</style>
